<template>
  <div id="top">
    <div class="title">
      <slot name="title"></slot>
      <el-tooltip
        v-for="item in top"
        :key="item.name"
        class="item"
        effect="dark"
        :content="item.content"
        placement="top"
      >
        <slot :name="item.name"></slot>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      top: [
        {
          name: "el-icon-edit",
          content: "编辑模型",
        },
        {
          name: "el-icon-delete",
          content: "删除模型",
        },
        {
          name: "el-icon-upload2",
          content: "导出模型",
        },
        {
          name: "el-icon-document-copy",
          content: "复制当前模型为最新模型",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
#top {
  padding: 25px 10px;
  .title {
    display: flex;
    align-items: flex-end;
    span {
      font-size: 28px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
    }
    i {
      cursor: pointer;
      color: #0052d9;
      font-size: 20px;
      padding-left: 15px;
      display: table-cell;
    }
  }
}
</style>
